<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">查询条件:</p>
			</el-col>
			<el-col :span="4">
				<el-input size="small"
				          v-model="searchValue"
				          placeholder="请输入内容">
				</el-input>
			</el-col>
			<el-col :span="6"
			        style="padding-left: 0px;text-align: left">
				<el-button type="primary"
				           size="small"
				           v-on:click="maintQuery">查询</el-button>
			</el-col>
			<el-col :span="13"
			        style="text-align: right;margin-left:-10px;">
				<el-button type="primary"
				           size="small"
				           v-on:click='msgAdd'>新增</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click='msgEdit'>编辑</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click='startResRole'>启用</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click='stopResRole'>停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList"
				          stripe
				          border
				          @selection-change="handleSelectionChange">
					<el-table-column type="selection"
					                 width="60"
					                 fixed>
					</el-table-column>

					<!--<el-table-column prop="maintPCode"
					                 label="大类编码"
					                 width="120">
					</el-table-column>-->
					<el-table-column prop="maintPName"
					                 label="大类名称"
					                 width="100">
					</el-table-column>
					<el-table-column prop="maintRef"
					                 label="关联类型"
					                 width="120"
					                 :formatter="maintResCov">
					</el-table-column>
					<el-table-column prop="maintRefType"
					                 label="关联关系"
					                 width="100"
					                 :formatter="maintResTypeCov">
					</el-table-column>
					<el-table-column prop="maintTypeName"
					                 label="维修类别"
					                 width="200">
					</el-table-column>
					<el-table-column prop="maintProjectName"
					                 label="维修项目"
					                 width="240">
					</el-table-column>
					<el-table-column prop="companyId"
					                 label="使用单位"
					                 :formatter="deptCov"
					                 width="240" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="status"
					                 label="状态"
					                 :formatter="statusCov"
					                 width="100">
					</el-table-column>
					<!--<el-table-column label="操作"
									                 width="160"
									                 fixed="right">
										<template scope="scope">
											<el-tooltip class="item"
											            effect="light"
											            content="编辑"
											            placement="top">
												<el-button type="primary"
												           size="mini"
												           class="iconfont icon-dingdan"
												           @click.native.prevent="msgEdit(scope.$index)"></el-button>
											</el-tooltip>
											<el-tooltip class="item"
											            effect="light"
											            content="启用"
											            placement="top">
												<el-button type="info"
												           size="mini"
												           class="iconfont icon-kaishi"
												           @click.native.prevent="startResRole(scope.$index)"></el-button>
											</el-tooltip>
											<el-tooltip class="item"
											            effect="light"
											            content="停用"
											            placement="top">
												<el-button type="warning"
												           size="mini"
												           class="iconfont icon-stop"
												           @click.native.prevent="stopResRole(scope.$index)"></el-button>
											</el-tooltip>
										</template>
									</el-table-column>-->
				</el-table>
				<el-pagination small
				               @size-change="handleSizeChange"
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--
															        	作者：王恒腾
															        	时间：2017-02-06
															        	描述：新增与编辑界面↓↓↓
															        -->
		<el-dialog title="维修类别"
		           v-model="maintFormShow">
			<el-form :model="maintFormData"
			         ref="maintForm"
			         :rules="msgRule"
			         label-width="100px">
				<el-col :span="12">
					<el-form-item label="维修类别:"
					              prop="maintPCode">
						<el-select size="small"
						           v-model="maintFormData.maintPCode"
						           placeholder="请选择">
							<el-option v-for="item in maintPCode"
							           :label="item.label"
							           :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="关联类型:"
					              prop="maintRef">
						<el-select size="small"
						           v-model="maintFormData.maintRef"
						           placeholder="请选择"
						           @change="changeClick">
							<el-option v-for="item in maintRef"
							           :label="item.label"
							           :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="关联关系:"
					              prop="maintRefType">
						<el-select size="small"
						           v-model="maintFormData.maintRefType"
						           placeholder="请选择">
							<el-option v-for="item in maintRefType"
							           :label="item.label"
							           :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24"
				        v-if="maintFormData.maintRef == '0' ">
					<el-form-item label="关联类别:"
					              prop="maintTypeName">
						<el-input size="small"
						          placeholder="请输入关联类别"
						          v-model="maintFormData.maintTypeName">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24"
				        v-if="maintFormData.maintRef == '1' ">
					<el-form-item label="关联项目:"
					              prop="isCode">
						<el-checkbox v-model="maintFormData.isCode" size="small" placeholder="请输入项目编码">识别代码</el-checkbox>
					</el-form-item>
				</el-col>
				<el-col :span="24"
				        v-if="maintFormData.maintRef == '1' ">
					<el-form-item label="关联项目:"
					              prop="maintProjectName">
						<el-input size="small"
						          placeholder="请输入项目名称"
						          v-model="maintFormData.maintProjectName">
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="Cancel">取 消</el-button>
				<el-button type="primary"
				           @click="saveMaint">提 交</el-button>
			</div>

		</el-dialog>
	</div>
</template>
<script>
export default {
  data: function() {
    return {
      //页码数
      CurentPage: 1,
      //每页的数量
      page: this.page,
      //				//维修类别显示状态
      //				maintTypeV: false,
      //				//维修项目显示状态
      //				maintProjectV: false,
      //查询条件
      searchValue: "",
      //关联类别
      maintRefData: [],
      //关联关系
      maintRefTypeData: [],
      //分组数据
      tableData: {
        total: 0,
        dataList: []
      },
      //字典转换值
      deptConvertData: {},
      //短信名称转换值
      msgTypeConvertData: {},
      //大类名称
      maintPCodetData: [],
      //创建编辑表单
      maintFormShow: false,
      //业务系统字典
      moduleCombo: [],
      //维修大类
      maintPCode: [],
      //关联类别
      maintRef: [],
      //关联关系
      maintRefType: [],
      //表单初始值
      emptyData: {
        id: "",
        maintPCode: "",
        maintPName: "",
        maintRef: "",
        isCode: "",
        maintRefType: "",
        maintTypeName: "",
        maintProjectName: "",
        status: "1",
        createTime: 0,
        createUser: "",
        updateTime: 0,
        updateUser: ""
      },
      //表单数据
      maintFormData: {
        id: "",
        maintPCode: "",
        isCode: "",
        maintRef: "",
        maintRefType: "",
        maintTypeName: "",
        maintProjectName: "",
        status: "1",
        createTime: 0,
        createUser: "",
        updateTime: 0,
        updateUser: ""
      },
      //校验规则
      msgRule: {
        maintPCode: [
          {
            required: true,
            message: "请选择维修类别",
            trigger: "blur"
          }
        ],
        maintRef: [
          {
            required: true,
            message: "请选择关联类型",
            trigger: "blur"
          }
        ],
        maintRefType: [
          {
            required: true,
            message: "请选择关联关系",
            trigger: "blur"
          }
        ],
        maintTypeName: [
          {
            required: true,
            message: "请输入关联类别",
            trigger: "blur"
          }
        ],
        maintProjectName: [
          {
            required: true,
            message: "请输入关联项目",
            trigger: "blur"
          }
        ]
      },
      multipleSelection: []
    };
  },

  methods: {
    //选择框
    handleSelectionChange: function(val) {
      debugger;
      this.$data.multipleSelection = val;
      if (this.$data.multipleSelection.length > 1)
        this.$message.error("请选择一条数据！");
    },
    //取消按钮
    Cancel: function() {
      this.$data.maintFormData = Object.assign(
        this.$data.maintFormData,
        this.$data.emptyData
      );
      this.$refs.maintForm.resetFields();
      this.$data.maintFormShow = false;
    },
    //查询
    maintQuery: function() {
      //debugger;
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/base/maint/page", //url
        params: {
          //发送的参数
          maintPCode: this.$data.searchValue, //大类类别
          start: this.$data.CurentPage, //页码
          limit: this.$data.page.pageSize //每页的数量
        }
      }).then(
        function(resp) {
          resp.data.total = parseInt(resp.data.total);
          // es5写法
          this.$data.tableData = resp.data;
          /*if(this.$data.list.dataList.length > 0) {
					if(this.$data.dictGroup == '' || this.$data.dictGroup == null) {
						this.$data.dictGroup = this.$data.group.dataList[0].g_code;
						this.$data.dictGroupName = this.$data.group.dataList[0].gName;
					}
					//this.dictQuery();
				}*/
        },
        function(error) {
          // error
        }
      );
    },
    //列表，分页大小切换
    handleSizeChange: function() {},
    //列表,当前页切换
    handleCurrentChange: function(currentPage) {
      this.$data.CurentPage = currentPage;
      //this.$data.dictGroup = '';
      this.maintQuery();
    },
    //新增资源角色
    msgAdd: function() {
      //清空数据
      debugger;

      debugger;
      this.$data.maintFormData = Object.assign(
        this.$data.maintFormData,
        this.$data.emptyData
      );

      this.$data.maintFormShow = true;
      //				this.$data.maintTypeV = false;
      //				this.$data.maintProjectV = false;
    },
    //编辑角色
    msgEdit: function() {
      //修改可编辑属性

      if (this.$data.multipleSelection.length == 1) {
        var resRoleData = this.$data.multipleSelection[0];
        this.$http
          .get(this.API_ROOT + "/base/maint/info", {
            params: {
              id: resRoleData.id
            }
          })
          .then(
            response => {
              this.$data.maintFormData = Object.assign(
                this.$data.maintFormData,
                response.data.data
              );
            },
            response => {
              // error callback
            }
          );
        this.$data.maintFormShow = true;
      } else {
        this.$message.error("请选择一条数据");
      }
    },
    //启用角色
    startResRole: function() {
      if (this.$data.multipleSelection.length == 1) {
        var resRoleData = this.$data.multipleSelection[0];
        //debugger;
        this.$http({
          method: "POST",
          url: this.API_ROOT + "/base/maint/start",
          params: {
            id: resRoleData.id
          }
        }).then(
          function(resp) {
            this.$message(resp.data.msg);
            this.maintQuery();
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$message.error("请选择一条数据");
      }
    },
    //停用角色
    stopResRole: function() {
      if (this.$data.multipleSelection.length == 1) {
        var resRoleData = this.$data.multipleSelection[0];
        this.$http({
          method: "POST",
          url: this.API_ROOT + "/base/maint/stop",
          params: {
            id: resRoleData.id
          }
        }).then(
          function(resp) {
            this.$message(resp.data.msg);
            this.maintQuery();
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$message.error("请选择一条数据");
      }
    },
    //点击关联类型
    changeClick(data) {
      if (data == "0") {
        this.$data.maintFormData.maintProjectName = "";
      } else {
        this.$data.maintFormData.maintTypeName = "";
      }
    },
    //状态转换
    statusCov: function(row, column) {
      return row.status == "0" ? "已停用" : "已启用";
    },
    //组织机构转换
    deptCov: function(row, column) {
      return this.$data.deptConvertData[row.companyId];
    },
    //关联类别转换
    maintResCov: function(row, column) {
      return this.$data.maintRefData[row.maintRef];
    },
    //关联关系转换
    maintResTypeCov: function(row, column) {
      return this.$data.maintRefTypeData[row.maintRefType];
    },
    //维修大类解析
    maintPCodeCov: function(row) {
      return this.$data.maintPCodetData[row];
    },
    saveMaint: function() {
      this.$data.maintFormData.maintPName = this.maintPCodeCov(
        this.$data.maintFormData.maintPCode
      );
      this.$refs.maintForm.validate(
        function(valid) {
          if (valid) {
            if (
              !this.$data.maintFormData.maintTypeName == "" ||
              !this.$data.maintFormData.maintProjectName == ""
            ) {
              this.$http
                .post(
                  this.API_ROOT + "/base/maint/save",
                  this.$data.maintFormData
                )
                .then(
                  resp => {
                    if (resp.data.success) {
                      this.$message(resp.data.msg);
                      this.maintQuery(this.$data.curTreeDeptId);
                      this.$data.maintFormShow = false;
                    } else {
                      this.$message.error(resp.data.msg);
                    }
                  },
                  resp => {}
                );
            } else {
              this.$message.error("请填写关联类别或关联项目！");
            }
          }
          return false;
        }.bind(this)
      );
    },
    queryDeptCovert: function() {
      this.$http
        .get(this.API_ROOT + "/rbac/dept/convert", {
          params: {
            root: "0",
            type: ""
          }
        })
        .then(
          response => {
            this.$data.deptConvertData = response.data;
          },
          response => {}
        );
    },
    //关联类型
    maintRefCovert: function() {
      this.$http
        .get(this.API_ROOT + "/base/dict/convert", {
          params: {
            group: "maintRef"
          }
        })
        .then(
          response => {
            this.$data.maintRefData = response.data;
          },
          response => {}
        );
    },
    //关联关系
    maintRefTypeCovert: function() {
      this.$http
        .get(this.API_ROOT + "/base/dict/convert", {
          params: {
            group: "maintRefType"
          }
        })
        .then(
          response => {
            this.$data.maintRefTypeData = response.data;
          },
          response => {}
        );
    },
    //维修大类
    msgTypeDeptCovert: function() {
      this.$http
        .get(this.API_ROOT + "/base/dict/convert", {
          params: {
            group: "maintPCode"
          }
        })
        .then(
          response => {
            this.$data.maintPCodetData = response.data;
          },
          response => {}
        );
    }
  },
  //表单创建时执行
  created: function() {
    //列表查询
    this.maintQuery();
    //查询部门转换
    this.queryDeptCovert();
    //关联类型
    this.maintRefCovert();
    //关联关系
    this.maintRefTypeCovert();
    //短信名称转换
    this.msgTypeDeptCovert();
    //加载模块类型
    this.$http
      .get(this.API_ROOT + "/base/dict/combo", {
        params: {
          group: "msgType"
        }
      })
      .then(
        response => {
          // success callback
          this.$data.moduleCombo = response.data;
        },
        response => {
          // error callback
        }
      );
    //加载维修大类
    this.$http
      .get(this.API_ROOT + "/base/dict/combo", {
        params: {
          group: "maintPCode"
        }
      })
      .then(
        response => {
          // success callback
          this.$data.maintPCode = response.data;
        },
        response => {
          // error callback
        }
      );
    //加载关联类别
    this.$http
      .get(this.API_ROOT + "/base/dict/combo", {
        params: {
          group: "maintRef"
        }
      })
      .then(
        response => {
          // success callback
          this.$data.maintRef = response.data;
        },
        response => {
          // error callback
        }
      );
    //加载关联关系
    this.$http
      .get(this.API_ROOT + "/base/dict/combo", {
        params: {
          group: "maintRefType"
        }
      })
      .then(
        response => {
          // success callback
          this.$data.maintRefType = response.data;
        },
        response => {
          // error callback
        }
      );
  }
};
</script>
<style>
.el-table .info-row {
  height: 10px !important;
}

.item {
  width: 30px;
}

.el-form-item {
  clear: both;
}

.el-dropdown .el-button-group,
.el-table .el-tooltip,
.el-table .el-tooltip__rel {
  display: inline;
}

.el-table {
  height: 100%;
  width: 100%;
}
</style>